<script setup>
  import { ref, onMounted } from 'vue'
  import taskApi from '@/apis/task.js'
  // 任务列表数据
  const pickUpList = ref([])
  // 下一页页码
  const nextPage = ref(1)
  // 每页包含数据条数
  const pageSize = ref(2)
  // 默认未触发下拉刷新
  const isTriggered = ref(false)
  onMounted(() => {
    getPickUpList()
  })
  // 获取任务
  async function getPickUpList(page = 1, pageSize = 5) {
    let { data } = await taskApi.getList(1, page, pageSize)
    if (page === 1) pickUpList.value = []
    pickUpList.value = [...pickUpList.value, ...data.items]
    // 自增之后再赋值，先加再赋值
    nextPage.value = ++data.page
    // pageSize.value = data.pageSize
  }
  // 监听滚动
  function onScrollToLower() {
    if (nextPage.value > pageSize.value) {
      return uni.utils.toast('已经没有数据')
    }
    getPickUpList(nextPage.value)
  }
  // 监听下拉刷新
  async function onScrollViewRefresh() {
    // 打开下拉动画
    isTriggered.value = true
    const cpage = 1
    // 请求数据
    await getPickUpList(cpage)
    isTriggered.value = false
  }
</script>

<template>
  <!-- scroll-y：允许滚动    -->
  <!-- refresher-enabled：下拉刷新  -->
  <!-- @scrolltolower：页面滚动到底部会触发 -->
  <scroll-view
    scroll-y
    refresher-enabled
    :refresher-triggered="isTriggered"
    @refresherrefresh="onScrollViewRefresh"
    @scrolltolower="onScrollToLower"
    class="scroll-view"
  >
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for="pick in pickUpList" :key="pick.id">
        <navigator
          hover-class="none"
          :url="`/subpkg_task/detail/index?id=${pick.id}`"
        >
          <view class="header">
            <text class="no">任务编号: {{ pick.transportTaskId }}</text>
            <!-- <text class="status">已延迟</text> -->
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ pick.startAddress }}</view>
              <view class="line">{{ pick.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ pick.planDepartureTime }}</view>
          <navigator
            v-if="pick.enablePickUp"
            hover-class="none"
            :url="`/subpkg_task/pickup/index?id=${pick.id}`"
            class="action"
            >提货</navigator
          >
          <button
            v-if="!pick.enablePickUp"
            disabled="true"
            class="action"
            style="color: white"
          >
            提货
          </button>
        </view>
      </view>
      <view v-if="false" class="task-blank">无待提货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
